<template>
	<scroll-view scroll-y="true" class="manage_sorting" :scroll-top="scrollTop">
		<view class="section_title">
			<view class="sec_left">我的权益卡</view>
			<view class="sec_right" @click="mStatusFunc">
				完成
			</view>
		</view>
		
		<view class="section">
			<view class="section_li"
				:class="sectionIndex != null?(sectionIndex == elindex?'section_check':'section_no_check'):''"
				v-for="(el,elindex) in jamList" :key="elindex" @click="equityCard(el,elindex)">
				<view class="top_left">
					<image :src="el.merchantIcon?el.merchantIcon:'/static/index/card_item04.png'" mode="aspectFill">
					</image>
					<view class="top_left_word">
						<view class="left_box">
							<text class="top_left_word01">{{el.merchantName}}</text>
							<view class="top_left_number">{{el.cardNum}}张</view>
						</view>
						<view class="right_box">
							<view class="card_header_right">
								<text class="left_01">编号</text>
								<text class="left_02">{{el.cardNo}}</text>
							</view>
							<view class="expand-number" @click.stop="myOpen(el)">
								展开编号<image src="/static/newsImg/my_right.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="section_li_box">
					<image class="imgBox" :src="el.cover"></image>
					<image class="imgBox2" :src="el.cover" mode="heightFix"></image>
					<view class="sec_li_info">
						<view class="info_top">
							<view class=""></view>
							<view class="top_right ellipseHide">
								持卡{{el.days}}天
							</view>
						</view>
						<view class="info_bottom ellipseHide" :style="{'background':el.color}">
							{{el.cardName}}
						</view>
					</view>
				</view>
			</view>
			<view class="mList mListFixt" v-if="!manageShow">
				<view class="mListItem" @click="changePosition('topping')" :class="{'opacityClass':sectionIndex == null}">
					<image src="/static/newsImg/my_topping.png" mode="widthFix"></image>
				</view>
				<view class="mListItem" @click="changePosition('up')" :class="{'opacityClass':sectionIndex == null}">
					<image src="/static/newsImg/my_up.png" mode="widthFix"></image>
				</view>
				<view class="mListItem" @click="changePosition('down')" :class="{'opacityClass':sectionIndex == null}">
					<image src="/static/newsImg/my_down.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 132rpx;"></view>
		<view class="forward" v-if="manageShow" @click="manageShow=false" @touchmove.prevent>
			<view class="know">我知道了</view>
			<view class="mContent">
				<view class="title">选中卡片</view>
				<view class="cImg">
					<view class="cImg01">
						<image class="imgBox" src="/static/newsImg/my_02.png" mode="widthFix"></image>
					</view>
					<image class="cImg02" src="/static/newsImg/my_01.png" mode="widthFix"></image>
					<view class="cImg01"></view>
				</view>
				<view class="imgCenter">
					<image class="imgBox" src="/static/newsImg/my_item.jpg" mode="widthFix"></image>
				</view>
				<view class="mList mListBg">
					<view class="mListItem">
						<text>点击置顶</text>
						<image src="/static/newsImg/my01.png" mode="widthFix"></image>
					</view>
					<view class="mListItem">
						<text>上移</text>
						<image src="/static/newsImg/my02.png" mode="widthFix"></image>
					</view>
					<view class="mListItem">
						<text>下移</text>
						<image src="/static/newsImg/my03.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="提示" content="是否保存当前排序"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</scroll-view>
</template>

<script>
	export default {
		name: "manage-sorting",
		props: {
			manData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				manageShow: true, //排序提示
				mText: '管理',
				sectionIndex: null, // 卡包选中下标
				scrollTop: 0,
				scrollH: 0,
				jamList: []
			};
		},
		created() {
			this.jamList = JSON.parse(JSON.stringify(this.manData)); //深拷贝
			
		},
		methods: {
			equityCard(el, index) {
				this.sectionIndex = index
				this.scrollTop = -1
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(".section_check").boundingClientRect((data) => {
						this.scrollTop = data.top - 100
					}).exec();
				})

			},
			async myOpen(item){
				this.$emit('myOpen',item)
				// this.$parent.$parent.myOpen(item)
			},
			mStatusFunc() {
				this.$refs.alertDialog.open()
			},
			changePosition(name) {
				// topping 置顶 up 上 down 下
				if (this.sectionIndex != null) {
					// topping 置顶 up 上 down 下
					var sectionData = {}
					if (name == 'topping') {
						this.toTop(this.jamList, this.sectionIndex)
					} else if (name == 'up') {
						this.moveUp(this.jamList, this.sectionIndex)
					} else {
						this.moveDown(this.jamList, this.sectionIndex)
					}
				}
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			dialogClose() {
				this.$emit('dialogClose',false)
				this.$refs.alertDialog.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			async dialogConfirm(value) {
				var detailDTOList = []
				this.jamList.forEach((item, index) => {
					var data = {}
					data.equityCardId = item.id
					data.sort = index + 1
					detailDTOList.push(data)
				})
				uni.showLoading({
					title: '请求中',
					mask: true
				})
				try {
					var res = await this.$api.putSetCardListSort({
						detailDTOList: detailDTOList
					})
					uni.hideLoading()
					this.$queue.showToast('修改成功！')
					this.$emit('confirmInfo',false)
					this.$refs.alertDialog.close()
					this.dialogClose()
				} catch {
					uni.hideLoading()
				}

			},
			// 上移
			moveUp(list, index) {
				if (index != 0) {
					list[index] = list.splice(index - 1, 1, list[index])[0];
					this.sectionIndex--
					this.scrollTop = -1
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select(".section_check").boundingClientRect((data) => {
							this.scrollTop = data.top - 100
						}).exec();
					})
				} else {
					// list.push(list.shift());
					this.$queue.showToast('到顶了！')
				}

			},
			// 下移
			moveDown(list, index) {
				if (index != list.length - 1) {
					list[index] = list.splice(index + 1, 1, list[index])[0];
					this.sectionIndex++
					this.scrollTop = -1
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select(".section_check").boundingClientRect((data) => {
							this.scrollTop = data.top - 100
						}).exec();
					})
			 } else {
					this.$queue.showToast('到底了！')
					// list.unshift(list.splice(index, 1)[0]);
				}
			},
			//置顶
			toTop(list, index) {
				if (index != 0) {
					list.unshift(list.splice(index, 1)[0]);
					this.sectionIndex = 0
					this.scrollTop = -1
					this.$nextTick(() => {
						this.scrollTop = 0
					})
				}
			},
		}
	}
</script>

<style scoped>
	.manage_sorting{
		width: 100%;
		height: 100vh;
	}
	.opacityClass{
		opacity:.5;
	}
	/* 我的卡包券 */
	.section {
		width: 686rpx;
		margin: 0 auto;
		padding:120rpx 0;
		box-sizing: border-box;
		/* padding: 0 32rpx; */
	}

	.section_title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		width: 100%;
		background: #F8FBFF;
		box-sizing: border-box;
		padding: 20rpx 46rpx;
		z-index: 55;
	}
	.sec_left {
		font-size: 34rpx;
		line-height: 44rpx;
		color: #000000;
	}

	.sec_right {
		font-weight: 400;
		font-size: 30rpx;
		color: #1557F2;

	}

	.section_button {
		font-size: 28rpx;
		color: #0B87F2;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx #F3F3F3;
		border-radius: 200rpx;
		margin: 0 auto;
	}

	.section_button image {
		width: 28rpx;
		height: 16rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
		transform: rotate(180deg);
		/* transition: all 0.2s; */
	}

	.openClass image {
		transform: rotate(0deg);
		transition: all 0.2s;
	}

	.section_li {
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 12rpx #EEEEEE;
	}

	.section_li_box {
		position: relative;
		width: 100%;
		height: 314rpx;
		background-repeat: no-repeat;
		background-size: cover;

		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.section_li .imgBox {
		filter: blur(5px);
		width: 100%;
		height: 314rpx;

		/* border-radius: 24rpx; */
	}

	.imgBox2 {
		height: 100%;
		position: absolute;
		z-index: 2;
	}

	.section_li .sec_li_info {
		position: absolute;
		top: 0;
		width: 100%;
		height: 314rpx;
		z-index: 3;
		border-radius: 24rpx;
	}

	.info_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 24rpx;
	}

	.top_left {
		/* padding-left: 24rpx; */
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		color: #000000;
		margin-bottom: 26rpx;

	}

	.top_left image {
		width: 68rpx;
		height: 68rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}

	.top_left .top_left_word {
		display: flex;
		flex-direction: column;
	}

	.right_box,
	.left_box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left_box {
		width: 540rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.top_left_number {
		border: 2rpx solid #F1C984;
		border-radius: 200rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #CD8200;
	}

	.right_box .expand-number {
		font-size: 24rpx;
		color: #1557F2;
		margin-left: 16rpx;
	}

	.expand-number image {
		width: 10rpx;
		height: 18rpx;
		margin-left: 4rpx;
	}

	.top_left_word .top_left_word02 {
		font-size: 22rpx;
	}

	.top_right {
		align-self: baseline;
		padding: 4rpx 18rpx;
		font-size: 21rpx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .3);
		border-radius: 200rpx 0px 0px 200rpx;
	}

	.info_bottom {
		position: absolute;
		width: 100%;
		bottom: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 58.82%);
		border-radius: 0px 0px 24rpx 24rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
	}

	.section_logo {
		width: 100%;
		height: 210rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 46rpx;
		box-sizing: border-box;
	}

	.logo_buttom {
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 12rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;
		margin-top: 20rpx;
	}

	.card_voucher {
		color: #999999;
	}

	/* 排序提示 */
	.forward {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		z-index: 999;
		padding-top: 40rpx;
	}
	.forward .know{
		width: 172rpx;
		height: 64rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 64rpx;
		float: right;
		margin-right: 40rpx;
	}
	.mContent{
		margin-top: 100rpx;
	}
	.title{
		width: 100%;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.cImg{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 40rpx;
	}
	.cImg .cImg01{
		width: 120rpx;
		height: 192rpx;
	}
	.cImg .cImg02{
		width: 92rpx;
		height: 112rpx;
		margin:0 68rpx;
	}
	.imgCenter{
		width: 630rpx;
		height: 436rpx;
		margin: 0 auto;
		border-radius: 32rpx;
		overflow: hidden;
	}

	.mList{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 20rpx;
		margin-right: 40rpx;
	}
	.mList .mListItem{
		font-size: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
	}
	.mList .mListItem image{
		width: 120rpx;
		height: 120rpx;
		margin-left: 40rpx;
	}
	.mListBg .mListItem{
		margin-bottom: 30rpx;
	}
	.mListBg .mListItem image{
		width: 104rpx;
		height: 104rpx;
	}
	.mListFixt{
		position: fixed;
		z-index: 99;
		right: -20rpx;
		bottom: 300rpx;
	}
	.section_no_check{
		 opacity: .5;
		 transform: scale(0.9);
		 margin-bottom: unset;
	}
	.section_check{
		opacity: 1;
		transform: scale(1);
		margin-bottom: unset;
	}

	/*  */
	.card_header_right {
		display: flex;
		flex-direction: row;
		margin-top: 6rpx;
	}

	.card_header_right text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* line-height: 34rpx; */
	}

	.card_header_right .left_01 {
		color: #824806;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		border-radius: 4rpx 0 0 4rpx;
	}

	.card_header_right .left_02 {
		color: #CB7F00;
		border: 1rpx solid #F1C67F;
		border-radius: 0px 4rpx 4rpx 0px;
	}
</style>
